<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MophyJoe
  Date: 9/14/2017
  Time: 4:42 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<header>
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        function del(info, id) {
            layer.confirm('确定要删除' + info + '这本书吗?', {//定义要提示的语句
                btn: ['apply', 'cancel']//定义确认及取消的提示文字
            }, function () {//定义确认的方法
                location.href = "/delbook/" + id;
            }, null);//null表示取消的方法
        }

        $(function () {
            $('a[id]').click(function () {//这里找到a标签里面有id的标签，定义点击事件
                del($(this).attr("title"), $(this).attr("id"));//找到当前标签的属性attr
            })
            $('.tt a[uid]').click(function () {

                layer.open({
                    type: 1,
                    title: '修改图书信息',
                    closeBtn: 0,
                    area: '516px',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('.upbook')
                });
            })
        })
    </script>
</header>
<body>
<div class="upbook"></div>
<table class="tt">
    <tr>
        <th>编号</th>
        <th>名字</th>
        <th>价格</th>
        <th>出版日期</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${books}" var="bk">
        <tr>
            <td>${bk.id}</td>
            <td>${bk.name}</td>
            <td>${bk.price}</td>
            <td><fmt:formatDate value="${bk.date}" pattern="yyyyMMdd"></fmt:formatDate></td>
                <%--        <td><a href="delbook?id=${bk.id}" onclick="return confirm('是否确定删除${bk.name}这本书？')">删除</a>/<a href="addbook">添加</a></td>这是使用普通id模式--%>
            <td><a href="delbook/${bk.id}" onclick="return confirm('是否确定删除${bk.name}这本书？')">普通删除</a>/<a
                    href="javascript:void(0)" onclick="del('${bk.name}',${bk.id})">layer删除</a>/<a
                    href="javascript:void(0)" id="${bk.id}" title="${bk.name}">layer删除2</a>/<a href="javascript:void(0)"
                                                                                               uid= ${bk.id}>修改layer</a>/<a
                    href="addbook">添加</a></td>
                <%--隐藏id模式--%>
        </tr>
    </c:forEach>
</table>
</body>
</html>
